<template>
  <div>
    <input placeholder="请输入关键字" type="text">
    <input type="button" value="搜索" @click="btnFind">
    <input type="button" value="新增" @click="btnAdd">
  </div>
  <table>
    <thead>
    <tr>
      <th>序号</th>
      <th>名称</th>
      <th>作者</th>
      <th>简介</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in bookList" key="item.id">
      <td>{{item.id}}</td>
      <td>{{item.bookName}}</td>
      <td>{{item.author}}</td>
      <td>{{item.blurb}}</td>
      <td>
        <input type="button" value="编辑" @click="btnEdit(item.id)">
        <input type="button" value="删除" @click="btnDel(item.id)">
      </td>
    </tr>

    </tbody>
  </table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {delBook, getAll} from "@/api/bookApi";
// 拿到路由实例
let router = useRouter();

let bookList = ref([])

function btnAdd(){
  console.log('新增')
  router.push('/bookAdd')
}
function btnDel(id){
  if (confirm('确定删除吗？')){
    delBook(id);
    let idx = bookList.value.findIndex(item => item.id ==id)
    bookList.value.splice(idx,1)
  }
}
function btnEdit(id){
  console.log('编辑')
  router.push(`/bookEdit/${id}`)

}
function btnFind(){
  console.log('搜索')
}


onMounted(async ()=> {
  let res = await getAll();
  console.log(res);
  
  bookList.value=res.data
})
</script>
